<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" th:href="@{/elementui/index.css}">
    <script th:src="@{/elementui/vue.js}"></script>
    <script th:src="@{/elementui/index.js}"></script>
    <script th:src="@{/js/axios.min.js}"></script>
</head>
<body>
<div id="app">

    <div>
        <div style="width: 100%; height: 100vh; overflow: hidden" class="bgImg"
             th:style="'background:url(/img/bj.jpg'+') 0 0 no-repeat;background-size: cover;'">
            <div style="width: 500px; height: 100vh; background-color:rgba(9, 50, 113 ,0.2); border-radius: 10px;
        margin: 0 auto;">

                <div style="width: 260px; margin: 0 auto; padding-top: 30px">
                    <div class="item" style="font-size: 20px; color: white">注册</div>
                    <div class="item">
                        <input type="text" v-model="member.name"
                               style="width: 100%; padding: 10px; border-radius: 5px;" placeholder="请输入姓名">
                    </div>
                    <div class="item">
                        <input v-model="member.phoneNumber"
                               style="width: 100%; padding: 10px; border-radius: 5px; box-sizing:border-box;"
                               placeholder="请输入手机号">
                    </div>
                    <div class="item">
                        <input v-model="member.email"
                               style="width: 100%; padding: 10px; border-radius: 5px; box-sizing:border-box;"
                               placeholder="请输入邮箱">
                    </div>
                    <div class="item">
                        <input type="password" v-model="member.password"
                               style="width: 100%; padding: 10px; border-radius: 5px; box-sizing:border-box;"
                               placeholder="请输入密码">
                    </div>
                    <div class="item">
                        <input type="password" v-model="member.confirm"
                               style="width: 100%; padding: 10px; border-radius: 5px; box-sizing:border-box;"
                               placeholder="请确认密码">
                    </div>
                    <div class="item">
                        <button style="background: dodgerblue; border-radius: 5px; color: white; width: 100%; padding: 10px; cursor: pointer"
                                @click="register">注册
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>

<script>
    new Vue({
        el: "#app",
        data: {
            reset: {},
            dialogFormVisible: false,
            code: '',
            count: 0,
            member: {},
        },
        created() {

        },
        methods: {
            register() {
                if (!this.member.name) {
                    this.$message({
                        type: "error",
                        message: "请输入姓名"
                    })
                    return
                }
                if (!this.member.phoneNumber) {
                    this.$message({
                        type: "error",
                        message: "请输入手机号"
                    })
                    return
                }
                if (!this.member.email) {
                    this.$message({
                        type: "error",
                        message: "请输入邮箱"
                    })
                    return
                }
                if (!this.member.password) {
                    this.$message({
                        type: "error",
                        message: "请输入密码"
                    })
                    return
                }
                if (!this.member.confirm) {
                    this.$message({
                        type: "error",
                        message: "请确认密码"
                    })
                    return
                }
                if (this.member.password !== this.member.confirm) {
                    this.$message({
                        type: "error",
                        message: "密码输入不一致"
                    })
                    return
                }
                axios.post("/member/register", this.member).then(res => {
                    if (res.data.code == 20000) {
                        this.$message({
                            type: "success",
                            message: res.data.msg
                        })
                        window.location.href = "login.html"
                    } else {
                        this.$message({
                            type: "error",
                            message: res.data.msg
                        })
                    }
                })
            }
        }
    })

</script>
<style scoped>
    .bgImg {
        /*background: url("../assets/bg.jpg") no-repeat;*/
        background-size: 100% 100vh;
    }

    .item {
        text-align: center;
        padding: 10px 0
    }
</style>
</html>